feat: implement 'LoadingShape' component #1866
Conversation
Features
Bug Fixes
DocumentationContributorsCommit-Lint commandsYou can trigger Commit-Lint actions by commenting on this PR:
|
![codeclimate[bot]](https://avatars.githubusercontent.com/in/9403?s=60&v=4){kind=small}
| const AvatarIcon = props => { | ||
| const { className, style } = props; | ||
| return ( | ||
| <svg className={className} style={style} viewBox="0 0 29 30"> |
There was a problem hiding this comment.
Similar blocks of code found in 2 locations. Consider refactoring.
| const ImageIcon = props => { | ||
| const { className, style } = props; | ||
| return ( | ||
| <svg viewBox="0 0 37 32" className={className} style={style}> |
There was a problem hiding this comment.
Similar blocks of code found in 2 locations. Consider refactoring.
| height: 100%; | ||
| `; | ||
|
|
||
| const StyledImageIcon = styled(ImageIcon)` |
There was a problem hiding this comment.
Similar blocks of code found in 2 locations. Consider refactoring.
| `} | ||
| `; | ||
|
|
||
| const StyledAvatarIcon = styled(AvatarIcon)` |
There was a problem hiding this comment.
Similar blocks of code found in 2 locations. Consider refactoring.
| expect(component.prop('shape')).toBe('rounded-rect'); | ||
| }); | ||
|
|
||
| it('should render the image icon when variant is "image"', () => { |
There was a problem hiding this comment.
Similar blocks of code found in 2 locations. Consider refactoring.
| expect(component.find(StyledImageIcon).length).toBe(1); | ||
| }); | ||
|
|
||
| it('should render the user icon when variant is "avatar"', () => { |
There was a problem hiding this comment.
Similar blocks of code found in 2 locations. Consider refactoring.
| background: ${props => props.palette.background.secondary} | ||
| linear-gradient( | ||
| 90deg, | ||
| rgba(226, 228, 233, 0.01) 0%, |
There was a problem hiding this comment.
let's use the color calculated on the theme,
on the Table component, we made something like that
linear-gradient(
90deg,
${props => replaceAlpha(props.palette.background.highlight, 0.01)} 0%,
${props => replaceAlpha(props.palette.background.highlight, 0.65)} 50%,
${props => replaceAlpha(props.palette.background.highlight, 0.01)} 100%
);
| } else { | ||
| el.style.width = '100%'; | ||
| } | ||
| }); |
There was a problem hiding this comment.
can we use an array of dependencies here? with the shape prop, thus it will run only when the shape prop changes
| height: 100%; | ||
| `; | ||
|
|
||
| const StyledImageIcon = attachThemeAttrs(styled(ImageIcon))` |
There was a problem hiding this comment.
Similar blocks of code found in 2 locations. Consider refactoring.
| `} | ||
| `; | ||
|
|
||
| const StyledAvatarIcon = attachThemeAttrs(styled(AvatarIcon))` |
There was a problem hiding this comment.
Similar blocks of code found in 2 locations. Consider refactoring.
|
Code Climate has analyzed commit 5fc757f and detected 6 issues on this pull request. Here's the issue category breakdown:
View more on Code Climate. |
fix: #1846
Changes proposed in this PR:
Implement LoadingShape component
I have followed (at least) the PR section of the contributing guide.